<template>
  <div class="europe-18w-analysis-detail">
    <el-card class="analysis-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>欧赔合理性分析详情</span>
        </div>
      </template>
      
      <div class="analysis-content">
        <!-- 第一行：主客队名称和比赛时间 -->
        <el-row :gutter="20" class="header-row">
          <el-col :span="24">
            <div class="match-info">
              <div class="match-teams">
                <span class="team home-team">{{ matchData.homesxname || '主队' }}</span>
                <span class="vs">VS</span>
                <span class="team away-team">{{ matchData.awaysxname || '客队' }}</span>
              </div>
              <div class="match-time">
                <el-icon><Calendar /></el-icon>
                <span>{{ store.formatDateTime(matchData.matchtime) }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        
        <!-- 第二行：赔率表格和最值设置 -->
        <el-row :gutter="20" class="content-row">
          <!-- 左边：赔率表格 -->
          <el-col :span="14">
            <EuropeOddsTable
              :odds-data="store.analysisDetailState.oddsData"
              :loading="store.analysisDetailState.loading"
              @refresh="loadOddsData"
              :calculate-return-rate="store.calculateReturnRate"
              :format-date-time="store.formatDateTime"
            />
          </el-col>
          
          <!-- 右边：最值设置 -->
          <el-col :span="10">
            <el-card class="min-max-settings-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>最值设置</span>
                </div>
              </template>
              
              <div class="min-max-settings">
                <!-- 主胜最值 -->
                <div class="odds-setting-group">
                  <h4>主胜</h4>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item label="最小值" size="small">
                        <el-input-number
                          v-model="store.analysisDetailState.minMaxSettings.home_odds_min"
                          :precision="2"
                          :step="0.01"
                          :min="0"
                          placeholder="最小值"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="最大值" size="small">
                        <el-input-number
                          v-model="store.analysisDetailState.minMaxSettings.home_odds_max"
                          :precision="2"
                          :step="0.01"
                          :min="0"
                          placeholder="最大值"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                
                <!-- 平局最值 -->
                <div class="odds-setting-group">
                  <h4>平局</h4>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item label="最小值" size="small">
                        <el-input-number
                          v-model="store.analysisDetailState.minMaxSettings.draw_odds_min"
                          :precision="2"
                          :step="0.01"
                          :min="0"
                          placeholder="最小值"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="最大值" size="small">
                        <el-input-number
                          v-model="store.analysisDetailState.minMaxSettings.draw_odds_max"
                          :precision="2"
                          :step="0.01"
                          :min="0"
                          placeholder="最大值"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                
                <!-- 客胜最值 -->
                <div class="odds-setting-group">
                  <h4>客胜</h4>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item label="最小值" size="small">
                        <el-input-number
                          v-model="store.analysisDetailState.minMaxSettings.away_odds_min"
                          :precision="2"
                          :step="0.01"
                          :min="0"
                          placeholder="最小值"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="最大值" size="small">
                        <el-input-number
                          v-model="store.analysisDetailState.minMaxSettings.away_odds_max"
                          :precision="2"
                          :step="0.01"
                          :min="0"
                          placeholder="最大值"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <!-- 第三行：分析按钮区域 -->
        <el-row :gutter="20" class="action-row">
          <el-col :span="24" class="action-buttons">
            <el-tooltip :content="store.analysisDetailState.hasMinMaxData ? '' : '请先设置最值数据后才能进行分析'" :disabled="store.analysisDetailState.hasMinMaxData">
              <el-button 
                type="primary" 
                size="large"
                :loading="store.analysisDetailState.analysisLoading"
                :disabled="!store.analysisDetailState.hasMinMaxData"
                @click="handleAnalysis"
              >
                <el-icon><DataAnalysis /></el-icon>
                分析
              </el-button>
            </el-tooltip>
            <el-button 
              type="success" 
              size="large"
              :loading="store.analysisDetailState.saveLoading"
              @click="handleSave"
            >
              <el-icon><DocumentAdd /></el-icon>
              最值有效
            </el-button>
            <el-button 
              type="danger" 
              size="large"
              @click="handleDeleteMinMax"
            >
              <el-icon><Delete /></el-icon>
              最值无效
            </el-button>
          </el-col>
        </el-row>
        
        <!-- 第四行：分析结果展示区域 -->
        <el-row v-if="store.analysisDetailState.analysisResult" :gutter="20" class="result-row">
          <el-col :span="24">
            <!-- 统计区域 -->
            <el-card class="stats-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>分析统计</span>
                </div>
              </template>
              
              <el-row :gutter="20" class="stats-main">
                <el-col :span="6">
                  <div class="stat-item">
                    <div class="stat-label">总比赛场次</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.total_matches }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-item">
                    <div class="stat-label">主胜场次</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.home_wins }}</div>
                    <div class="stat-rate">占比: {{ store.analysisDetailState.analysisResult.stats.home_win_rate.toFixed(2) }}%</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-item">
                    <div class="stat-label">平局场次</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.draws }}</div>
                    <div class="stat-rate">占比: {{ store.analysisDetailState.analysisResult.stats.draw_rate.toFixed(2) }}%</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-item">
                    <div class="stat-label">客胜场次</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.away_wins }}</div>
                    <div class="stat-rate">占比: {{ store.analysisDetailState.analysisResult.stats.away_win_rate.toFixed(2) }}%</div>
                  </div>
                </el-col>
              </el-row>
              
              <!-- 胜的初赔、理论初赔、差值 -->
              <el-row :gutter="20" class="stats-detail">
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-label">胜的初赔</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.home_initial?.toFixed(2) || '-' }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-label">胜的理论初赔</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.theory_home_initial?.toFixed(2) || '-' }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-label">差值</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.home_diff?.toFixed(2) || '-' }}</div>
                  </div>
                </el-col>
              </el-row>
              
              <!-- 平的初赔、理论初赔、差值 -->
              <el-row :gutter="20" class="stats-detail">
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-label">平的初赔</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.draw_initial?.toFixed(2) || '-' }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-label">平的理论初赔</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.theory_draw_initial?.toFixed(2) || '-' }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-label">差值</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.draw_diff?.toFixed(2) || '-' }}</div>
                  </div>
                </el-col>
              </el-row>
              
              <!-- 负的初赔、理论初赔、差值 -->
              <el-row :gutter="20" class="stats-detail">
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-label">负的初赔</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.away_initial?.toFixed(2) || '-' }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-label">负的理论初赔</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.theory_away_initial?.toFixed(2) || '-' }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-label">差值</div>
                    <div class="stat-value">{{ store.analysisDetailState.analysisResult.stats.away_diff?.toFixed(2) || '-' }}</div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
            
            <!-- 结果表格已删除，根据需求不再显示 -->
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useEurope18wStore } from '@/pinia/stores/europe18wStore'
import { Calendar, DataAnalysis, DocumentAdd, Delete } from '@element-plus/icons-vue'
import EuropeOddsTable from './EuropeOddsTable.vue'
import type { MatchPredictEurope18wan } from '@/models/matchPredictEurope18wan'

// 定义组件属性
const props = defineProps<{
  matchData: MatchPredictEurope18wan
}>()

// 使用 store
const store = useEurope18wStore()

// 加载赔率数据
const loadOddsData = async () => {
  if (!props.matchData.fid) {
    ElMessage.warning('缺少比赛ID')
    return
  }

  await store.loadOddsDataForAnalysis(props.matchData.fid)
}

// 执行分析
const handleAnalysis = async () => {
  if (!props.matchData.fid) {
    ElMessage.warning('缺少比赛ID')
    return
  }

  const result = await store.handleAnalysisForDetail(props.matchData.fid)
  if (result.success) {
    ElMessage.success(result.message)
  } else {
    ElMessage.warning(result.message)
  }
}

// 保存设置
const handleSave = async () => {
  if (!props.matchData.fid) {
    ElMessage.warning('缺少比赛ID')
    return
  }

  const result = await store.handleSaveMinMax(props.matchData.fid)
  if (result.success) {
    ElMessage.success(result.message)
  } else {
    ElMessage.error(result.message)
  }
}

// 最值无效
const handleDeleteMinMax = async () => {
  if (!props.matchData.fid) {
    ElMessage.warning('缺少比赛ID')
    return
  }

  const result = await store.handleDeleteMinMaxFromAnalysis(props.matchData.fid)
  if (result.success) {
    ElMessage.success(result.message)
  } else {
    ElMessage.error(result.message)
  }
}

// 组件挂载时加载数据
onMounted(() => {
  if (props.matchData.fid) {
    store.initializeAnalysisDetailData(props.matchData.fid)
  }
})
</script>

<style scoped>
.europe-18w-analysis-detail {
  padding: 20px;
}

.analysis-card {
  border: 1px solid #ebeef5;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-row {
  margin-bottom: 20px;
}

.match-info {
  text-align: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.match-teams {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.team {
  padding: 5px 10px;
}

.home-team {
  color: #e74c3c;
}

.away-team {
  color: #3498db;
}

.vs {
  margin: 0 20px;
  color: #7f8c8d;
}

.match-time {
  font-size: 14px;
  color: #7f8c8d;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.content-row {
  margin-bottom: 20px;
}

.odds-table-card,
.min-max-settings-card {
  height: 100%;
}

.min-max-settings {
  padding: 0 10px;
}

.odds-setting-group {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.odds-setting-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.odds-setting-group h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 14px;
  font-weight: 600;
}

.action-row {
  margin-bottom: 20px;
}

.action-buttons {
  text-align: center;
  padding: 20px 0;
}

.action-buttons .el-button {
  margin: 0 10px;
}

.result-row {
  margin-top: 20px;
}

.stats-card {
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-rate {
  font-size: 12px;
  color: #7f8c8d;
}

.result-table-card {
  margin-top: 20px;
}
</style>
